<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
    <head>
        <title>乐琪英语 ，乐在其中</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="baidu-site-verification" content="72799a1533f9f8758c3bffd228047e8c"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />  
        <link rel="stylesheet" type="text/css" href="./css/style.css">
        <link rel="stylesheet" type="text/css" href="./css/all.css">
        <link rel="stylesheet" type="text/css" href="./js/showDialog.css">
        <link rel="stylesheet" type="text/css" href="./css/gridview.css">
        <script type="text/javascript" src="./js/jquery.js"></script>
        <script type="text/javascript" src="./js/md5.js"></script>
        <script type="text/javascript" src="./js/leqi.js"></script>
        <script type="text/javascript" src="./js/gridview.js"></script>
        <script type="text/javascript" src="./js/dateutil.js"></script>
        <script type="text/javascript" src="./js/json2.js"></script>
        <script type="text/javascript" src="./js/showDialog.js"></script>
        <script type="text/javascript" src="./js/jquery.cookie.js"></script>
        <link rel="stylesheet" href="./css/common.css" type="text/css" />
        <script type="text/javascript" src="./js/xheditor.js"></script>
        <style>
            #content_all{

                width:100%;
                font-size: 16px;
                float: left;
                margin-top: 50px;
                top:80px;
            }
            #content_left{
                float:left;
                width: 15%;
            }
            #content_right{
                float: right;

                width:15%;

            }

            #content_center{
                width: 70%;
                float:left;
            }

            #content_content{
                width: 100%;

            }

            #clear{
                clear: both;
            }

            #content_bottom{
                width: 100%;

            }

            .list_item_odd{
                background: #fafafa;
                padding: 10px 5px 10px 5px;
                margin: 10px 0px 10px 0px;
                border: #1A1A1A 1px solid;
            }

            .list_item_o{
                background: #F0F0F0;
                padding: 10px 5px 10px 5px;
                margin: 10px 0px 10px 0px;
                border: #1A1A1A 1px solid;
            }

        </style>
        <script type="text/javascript">

            var currentPage;
            var size;
            var allcount;
            var allPage;

            $(document).ready(function() {
                //	addTable(httpURL+"/content/table.html",true,null);
                setContent2IdByUrl(httpURL + "/header.html", "content_header");
                setContent2IdByUrl(httpURL + "/bottom.html", "content_bottom");
                turnPage(1, 24);
            });

            function turnPage(page, size) {
                $.ajax({
                    url: httpURL + "/edit/content_getContentListByType!getContentListByType.do",
                    data: "currentPage=" + page + "&size=" + size + "&type=8",
                    type: "POST",
                    dataType: "json",
                    success: function(result) {
                        currentPage = result.currentPage;
                        size = result.pageSize;
                        allPage = result.allPage;
                        allCount = result.allCount;
                        var list = result.list;
                        setPage(size, currentPage, allPage, allCount);
                        //createTable(list,size,currentPage,allCount);
                        var startindex = (currentPage - 1) * size + 1;
                        createTable($("#content_content"), list, startindex);
                    }
                });
            }


            /**
             * 在div里创建table
             * @param {type} div
             * @param {type} datas 数据
             * @param {type} startIndex 起始索引
             * @returns {undefined}
             */
            function createTable(div, datas, startIndex) {
                div.html("");

                for (var i = 0; i < datas.length; i++) {
                    var item = datas[i];
                    var table = $("<div width='100%'></div>");
                    if (i % 2 == 0) {
                        table.addClass("list_item_odd");

                    } else {
                        table.addClass("list_item_o");

                    }
                    var titleTd = $("<div><a target='_blank' class='gridview_border_url' href='" + httpURL + "/content/grammar.html?id=" + item.id + "'>" + (startIndex + i) + "." + item.title + "</a></div>");
                    table.append(titleTd);

                    var subTitle = $("<div width='100%'></div>");
                    var dateStr = getDate(item.createTime, "yyyy-MM-dd hh:mm");
                    var dataTd = $("<div width='30px'  class='gridview_border_subtitle'><span >update:</span>" + dateStr + "</div>");
                    subTitle.append(dataTd);
                    table.append(subTitle);
                    var summar = $("<div width='100%' style='font-size:12px;margin-top:10px;'> &nbsp; &nbsp;" + item.summary + "</div>");
                 
                    table.append(summar);
                    div.append(table);


                }

            }

        </script>
    </head>

    <body>
        <div id="content_header">

        </div>
        <div id="content_all" >
            <div id="content_left">
                &nbsp; &nbsp;
            </div>
            <div id="content_center">
                <div id="content_content">

                </div>
                <div id="pages" class="page_nav">

                </div>
                <div id="content_bottom">

                </div>
                <div id="content_right">
                    &nbsp; &nbsp;
                </div>
            </div>

        </div>

    </body>
</html>
